<template>
	<view>
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="interval" :duration="duration">
			<swiper-item v-for="(imgItem,index) in swiperImageList" :key="index">
				<image :src="imgItem.land_photo" mode="widthFix" lazy-load></image>
			</swiper-item>
		</swiper>
		<view class="detailedInformation">
			<!-- 标题 -->
			<view class="landTitle uni-flex">
				<view>{{landInfoList.province}}{{landInfoList.city}}{{landInfoList.county}}{{landInfoList.area}}亩{{landInfoList.type}}用地{{landInfoList.circulation}}</view>
				<view class=""  @click="collectChange()">
					<image :src="showCollect === false?'../../static/image/collected.png':'../../static/image/collect.png'" mode="aspectFill" lazy-load></image>
					{{collectText}}
				</view>
			</view>
			
			<view class="landPrice uni-flex">
				<view>价格:</view>
				<view>{{landInfoList.price}}万</view>
				<view>元</view>
				<view>(转让费)</view>
				<view>{{landInfoList.release_time | renderTime}}</view>
			</view>
			
			<!-- 土地信息 -->
			<view class="landDetailed">
				<view class="basicInfoTitle">
					<image src="../../static/image/basicInfo.png" mode="aspectFill" lazy-load></image>
					土地基本信息
				</view>
				<view class="DetailedModel uni-flex">
					<view class="">地理位置: {{landInfoList.province}}{{landInfoList.city}}{{landInfoList.county}}</view>
					<view class="">详细地址: {{landInfoList.address}}</view>
					<view class="">流转类型: {{landInfoList.circulation}}</view>
					<view class="">土地类型: {{landInfoList.type}}</view>
					<view class="">土地面积: {{landInfoList.area}}亩</view>
					<view class="">历史流转: {{landInfoList.history}}</view>
					<view class="">流转时间: {{landInfoList.lease_time | renderTime}}</view>
					<view class="">土地期限: {{landInfoList.term | renderTime}}</view>
				</view>
			</view>
			
			<!-- 联系方式 -->
			<view class="contactInformation">
				<view class="contactInfoTitle">
					<image src="../../static/image/contactNumber.png" mode="aspectFill" lazy-load></image>
					联系方式
				</view>
				<view>
					<view>联系人: {{landInfoList.land_contact}}</view>
					<view>联系电话: {{landInfoList.land_contact_phone}}</view>
				</view>
			</view>
			
			<!-- 地理位置 -->
			<view class="landGeographicPosition">
				<view class="positionTitle">
					<image src="../../static/image/geographicPosition.png" mode="aspectFill" lazy-load></image>
					地理位置
				</view>
				<view class="page-body">
					<view class="page-section page-section-gap">
						<map style="width: 100%; height: 200px;" :latitude="latitude" :longitude="longitude" :markers="covers">
						</map>
					</view>
				</view>
			</view>
			
			<!-- 地块简介 -->
			<view class="landDescription">
				<view class="synopsisTitle">
					<image src="../../static/image/synopsis.png" mode="aspectFill" lazy-load></image>
					土地简介
				</view>
				<view class="synopsisContent">{{landInfoList.introduce}}</view>
			</view>
		</view>
		<!-- 占位区 -->
		<view class="" style="width: 100%;height: 110upx;"></view>
		<!-- 底部联系 -->
		<view class="commentNav">
			<view class="comment" >
				<view class="">
					<image src="../../static/image/linkman.png" mode="aspectFill" lazy-load></image>
					联系卖家
				</view>
				<view class="">
					<image src="../../static/image/service.png" mode="aspectFill" lazy-load></image>
					联系客服
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				interval: 2000,//自动播放间隔时长
				duration: 500,//切换时长
				swiperImageList: [ 
					{land_photo: "../../static/image/1.jpg"},
					// {land_photo: "../../static/image/2.jpg"},
					// {land_photo: "../../static/image/16.jpg"},
				],
				showCollect: false,// 默认不是收藏
				collectText: "未收藏",  
				issue_id:"", // 发布土地id
				ruser_id: 2, // 用户id
				landInfoList: [],	// 土地信息列表
				
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}]
			}
		},
		
		//监听上个页面传递的数据
		onLoad(data) {
			// 从缓存中获取土地id
			this.issue_id = uni.getStorageSync('landDetailsIssueId');
			// 获取土地数据
			this.getLandData();
			// 获取用户是否收藏
			this.getUserCollect();
		},
		
		onReady() {
			
		},
		// 过滤器
		filters:{
			// 过滤后端传递的日期格式
			renderTime(date) {
				let dateee = new Date(date).toJSON();
				var data = new Date(+new Date(dateee) + 0 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
				var newDate=/\d{4}-\d{1,2}-\d{1,2}/g.exec(data);
				return newDate[0];
			}
		},
		
		methods: {
			
			// 获取土地信息
			getLandData(){
				
				uni.request({
					url: this.confige.webUrl + "/app/landInfo/detailLand",
					data:{
						id: this.issue_id,
					},
					header:{},
					success: (res) => {
						// console.log(res);
						this.landInfoList = res.data.data;
						if(res.data.data.issuePhotoList.length < 2){
							var list = res.data.data.issuePhotoList;
							this.swiperImageList.unshift(...list);
						} else {
							this.swiperImageList = res.data.data.issuePhotoList;
						}
					}	
				})
			},
			
			// 获取用户收藏信息
			async getUserCollect(){
				const res = await this.$http({
					url: "/app/landInfo/userCollect",
					data: {
						issue_id: this.issue_id,
						ruser_id: this.ruser_id,
					},
				})
				// console.log(res);
				if(res.data.code === 200){
					this.showCollect = true;
				} 
				else if(res.data.code === 206){
					this.showCollect = false;
				} else {
					// 显示自动消失的提示消息
					// function showToast(){
					// 	plus.nativeUI.toast("I'am toast information!");
					// }
					// console.log(res.data.message);
				}
			},
			
			// 点击收藏和取消
			async collectChange(){
				this.showCollect = !this.showCollect;
				if(this.showCollect){
					const res = await this.$http({
						url: "/app/landInfo/addUserCollect",
						data: {
							issue_id: this.issue_id,
							ruser_id: this.ruser_id,
						},
					})
					// console.log(res);
					this.collectText = "已收藏";
					uni.showToast({
					    title: '收藏成功',
					    duration: 1000
					});
				} else {
					const res = await this.$http({
						url: "/app/landInfo/deletelUserCollection",
						data: {
							issue_id: 4,//this.issue_id,
							ruser_id: 4,//this.ruser_id,
						},
					})
					// console.log(res);
					this.collectText = "未收藏";
					uni.showToast({
					    title: '已取消收藏',
					    duration: 1000
					});
					 
				}
				
			},
			
			
		}
	}
</script>

<style lang="less" scoped>
	@import "../../common/global.less";
	.swiper image{
		width: 100%;
	}
	
	.detailedInformation{
		.landTitle{
			// margin: @uni-spacing-col-base @uni-spacing-row-base auto;
			>view:first-child{
				width: 600rpx;
				height: 100rpx;
				// padding-right: @uni-spacing-row-sm;
				// font-size: @uni-font-size-base;
				-webkit-line-clamp: 2;/*规定超过两行的部分截断*/
				-webkit-box-orient: vertical;
				overflow : hidden; 
				word-break: break-all;/*在任何地方换行*/
				border-right: 1upx solid #BBBBBB;
				
			}
			>view:last-child{
				width: 110rpx;
				height: 100rpx;
				text-align: center;
				line-height: 35rpx;
				>image{
					width: 50rpx;
					height: 50rpx;
					margin: 0 30rpx auto;
				}
			}
		}
	}
	
	.landPrice{
		margin: 0rpx 20rpx auto;
		width: 100%;
		height: 120rpx;
		>view:first-child{
			line-height: 130rpx;
			color: @uni-text-color;
		}
		>view:nth-child(2){
			margin: 0 @uni-spacing-row-sm;
			font-size: 60rpx;
			color: #09BB07;
		}
		>view:nth-child(3){
			line-height: 140rpx;
			color: #09BB07;
		}
		>view:nth-child(4){
			margin: 0 @uni-spacing-row-sm;
			line-height: 140rpx;
		}
		>view:last-child{
			position: absolute;
			margin-left: 570rpx;
			line-height: 130rpx;
			font-size: @timeSize;
		}
	}
	
	.landDetailed{
		padding: @uni-spacing-row-sm @uni-spacing-row-base;
		background-color: @backcolorthree;
		.basicInfoTitle{
			margin: @uni-spacing-col-base 0;
			font-size: @uni-font-size-lg;
			display: flex;
			align-items: center;
			image{
				width: @uni-img-size-sm;
				height: @uni-img-size-sm;
				margin-right: @uni-spacing-row-sm;
			}
		}
		.DetailedModel{
			flex-wrap: wrap;
			view{
				width: 50%;
				font-size: @uni-font-size-sm;
			}
			>view:first-child{
				width: 100%;
			}
			>view:nth-child(2){
				width: 100%;
			}
		}
	}
	
	.contactInformation{
		padding: @uni-spacing-col-sm @uni-spacing-row-base;
		.contactInfoTitle{
			margin: @uni-spacing-col-base 0;
			font-size: @uni-font-size-lg;
			display: flex;
			align-items: center;
			image{
				width: @uni-img-size-sm;
				height: @uni-img-size-sm;
				margin-right: @uni-spacing-row-sm;
			}
		}
		>view{
			display: flex;
			view{
				width: 50%;
			}
		}
	}
	
	.landGeographicPosition{
		.positionTitle{
			margin: @uni-spacing-col-base 0;
			font-size: @uni-font-size-lg;
			display: flex;
			align-items: center;
			image{
				width: @uni-img-size-sm;
				height: @uni-img-size-sm;
				margin-right: @uni-spacing-row-sm;
			}
		}
	}
	
	.landDescription{
		padding: @uni-spacing-col-base @uni-spacing-row-base;
		.synopsisTitle{
			margin: @uni-spacing-col-base 0;
			font-size: @uni-font-size-lg;
			display: flex;
			align-items: center;
			image{
				width: @uni-img-size-sm;
				height: @uni-img-size-sm;
				margin-right: @uni-spacing-row-sm;
			}
		}
		.synopsisContent{
			width: 100%;
			height: 200upx;
			font-size: @uni-font-size-sm;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			border: 1upx solid @uni-border-color2;
		}
	}
	
	.commentNav{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 70upx;
		padding: @uni-spacing-col-sm 0;
		background: #FFFFFF;
		border: 1upx solid #DDDDDD;
		.comment{
			display: flex;
			
			>view{
				width: 50%;
				display: flex;
				text-align: center;
				justify-content: center;
				border: 1upx solid #BBBBBB;
				>image{
					margin-right: @uni-spacing-row-sm;
					width: @uni-img-size-sm;
					height: @uni-img-size-sm;
				}
			}
		}
	}
	
	
</style>